<link href="/css/matchShowAll.css" media="screen" rel="stylesheet" type="text/css">

<?php
use Zend\Session\Container;
use TennisTournament\Model\Security;

$action = $this->url('match', array('action' => 'update'));
$roles = new Container('ROLES');

if ($roles->offsetGet('ROLE') != null) {
    if (Security::ADMIN == $roles->offsetGet('ROLE')) { ?>

        <span style="display:none;" id="admin">true</span>
        <script>
            $(function() {
                $( "#datepicker" ).datepicker({
                    showOn: "button",
                    buttonImage: "/img/calendar.gif",
                    buttonImageOnly: true,
                    dateFormat: 'mm/dd/yy'
                });
            });
        </script>
        <div id="manageMatch" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form action="<?php echo $action; ?>" method="POST" name="match" id="match">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Manage Match</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" value="">
                    <table>
                        <tr>
                            <td colspan="2">Date :</td>
                            <td colspan="2"><input type="text" name="date" id="datepicker" style="margin-right: 1px;"/></td>

                            <td colspan="2" style="padding-left: 10px;">Winner :</td>
                            <td colspan="2"><select name="winner">
                                    <option ></option>
                                    <option name="HOST">HOST</option>
                                    <option name="GUEST">GUEST</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <div class="CSSTableGenerator" >
                        <table>
                            <thead>
                            <tr>
                                <th colspan="2" class="hostPlayerPicture"></th>
                                <th colspan="2" class="guestPlayerPicture"></th>
                            </tr>
                            </thead>
                            <tbody class="results">
                            <tr><td colspan="4" class="title"></td></tr>
                            <tr><td colspan="4" class="title">First Game</td></tr>
                            <tr>
                                <td width="25%">Host score:</td><td width="25%"><input type="text" name="hostScoreFGame"/></td>
                                <td width="25%">Guest score:</td><td width="25%"><input type="text" name="guestScoreFGame"/></td>
                            </tr>
                            <tr><td colspan="4" class="title">Second Game</td></tr>
                            <tr>
                                <td width="25%">Host score:</td><td width="25%"><input type="text" name="hostScoreSGame"/></td>
                                <td width="25%">Guest score:</td><td width="25%"><input type="text" name="guestScoreSGame"/></td>
                            </tr>
                            <tr><td colspan="4" class="title">Third Game</td></tr>
                            <tr>
                                <td width="25%">Host score:</td><td width="25%"><input type="text" name="hostScoreTGame"/></td>
                                <td width="25%">Guest score:</td><td width="25%"><input type="text" name="guestScoreTGame"/></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn closeBtn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <input type="submit" name="submit" id="submitButton" class="btn btn-primary" value="Update Match">
                </div>
            </form>
        </div>
<?php
    }
}
?>

<div id="showAllGroupStages"></div>
<script type="text/javascript">

    jQuery(document).ready(function() {
        var matchesService = new TennisTour.Service.MatchesService();
        var groupStageMatchesAsJSON = '<?php echo $this->groupStageMatchesAsJSON;?>';
        var collectionStages = matchesService.parseArrayToMatchesFromJSON(groupStageMatchesAsJSON);
        matchesService.showAllMatches({
            deployId: 'showAllGroupStages',
            collectionStages : collectionStages
        });
    });
</script>